import React from 'react';
import { Card, Tag } from 'antd';

const industries = [
  { key: 'medical', name: '医疗健康', color: '#ff7875', icon: '🩺' },
  { key: 'finance', name: '金融科技', color: '#36cfc9', icon: '💰' },
  { key: 'manufacture', name: '智能制造', color: '#40a9ff', icon: '🏭' },
  { key: 'education', name: '教育科技', color: '#9254de', icon: '🎓' },
  { key: 'retail', name: '零售消费', color: '#ffc53d', icon: '🛒' },
  { key: 'content', name: '内容创作', color: '#ff85c0', icon: '✍️' },
  { key: 'service', name: '企业服务', color: '#73d13d', icon: '🏢' },
];

const IndustryNav: React.FC = () => {
  return (
    <div style={{ display: 'flex', overflowX: 'auto', gap: 16, padding: '8px 0 8px 0' }}>
      {industries.map(ind => (
        <Card
          key={ind.key}
          hoverable
          style={{ minWidth: 140, textAlign: 'center', borderRadius: 16, background: ind.color, color: '#fff', fontWeight: 600, fontSize: 18 }}
        >
          <div style={{ fontSize: 28, marginBottom: 8 }}>{ind.icon}</div>
          {ind.name}
        </Card>
      ))}
    </div>
  );
};

export default IndustryNav; 